<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
    <!-- 打印的样式-->
    <style media="print">
        @page {
            size: auto;
            margin: 0mm;
        }
    </style>

    <style type="text/css">

        *{
            margin:5px;
            padding:0;
        }
        #app,.wrapper{
            position: relative;
            width: 800;
            height:650px;
        }
        #app .content-wrapper{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            padding: 0 100px;
            width:80%;
            background:pink;
        }
        #app .title{
            text-align: center;
        }
        #app .wrapper .logo{
            background:url("./assets/lv.png") no-repeat center;
            position: absolute;
            left:-10%;
            width:62px;
            height:62px;
            display: inline-block;
            border-radius: 50%;
            background-size:100% 100%;
            top: 25%;
            transform: translateY(-25%);
        }
        #app .title .goodsNo{
            position: absolute;
            right:0%;
            bottom:0%;
        }
        #app .title .goodsNo p{
            font-size:20px;
        }
        #app .content-wrapper .order{
            margin-top:5px;
            overflow:hidden;
        }
        #app .content-wrapper .order li{
            list-style: none;
            width:31.8%;
            float: left;
        }
        #app .equal{
            margin-top:5px;
            text-align:center;
        }
        #app .equal table{
            border:1px solid #000;
        }
        #app .equal table tr{
            height:28px;
        }
        #app .equal table tr:nth-child(1) td{
            border-bottom:1px solid #000;
        }
        #app .equal table tr td:not(.remark){
            border-right:1px solid #000;
        }
        #app .equal .remark{
            border-right:none!important;
        }
        #app .equal .total td{
            border-top:1px solid #000;
        }
        #app .equal .count{
            text-align: left!important;
        }
        #app .equal .tdPadding td{
            padding-bottom:50px;
        }
        #app desc{
            font-size:10px;
        }
        #app .sign{
            float: right;
        }

        .button {
            background-color: #4CAF50; /* Green */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }
        .buttonPage {
            background-color: #008CBA;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }
    </style>

</head>
<body>
<!--startprint-->
<div id="app">
    <div class="wrapper">
        <div class="content-wrapper">
            <div class="title">
                <!--<span class="logo"></span>-->
                <h1> ${invoice.title!}-出货单</h1>
                <h4>地址：${invoice.address!}  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; TEL: ${invoice.moblie!} </h4>
            </div>


            <div class="order">
                <ul>
                    <li>
                        <span>客户：</span>
                        <span>${order.shopName!}</span>
                    </li>
                    <li>
                        <span>订单号：</span>
                        <span>${order.orderNum!}</span>
                    </li>
                    <li>
                        <span>日期：</span>
                        <span>${order.createTime?string('yyyy-MM-dd HH:mm')}</span>
                    </li>
                </ul>
            </div>
            <div class="equal">
                <table width="100%" border="1" cellspacing="0" cellpadding="0">
                    <tr>
                        <td style="width: 5%">序号</td>
                        <td style="width: 25%">货品名称</td>
                        <td style="width: 25%">型号规格</td>
                        <td style="width: 10%">单位</td>
                        <td style="width: 10%">数量</td>
                        <td style="width: 10%">单价</td>
                        <td style="width: 10%">总价</td>
                        <td style="width: 10%">备注</td>
                    </tr>

                    <#list orderItems.list as orderItem>
                        <tr>
                            <td>${orderItem_index+1}</td>
                            <td>${orderItem.invoiceName!}</td>
                            <td>${orderItem.material!}/${orderItem.model!}</td>
                            <td>${orderItem.unit!}</td>
                            <td>${orderItem.number!}</td>
                            <td>${orderItem.price!}</td>
                            <td>${orderItem.totalPrice!}</td>
                            <td>${orderItem.remark!}</td>
                        </tr>
                    </#list>

                    <#if  (orderItems.list?size != 11)>
                        <#list 1..(11-orderItems.list?size) as t>
                            <tr>
                                <td>${orderItems.list?size+t_index+1}</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </#list>
                    </#if>


                    <tr>
                        <td colspan="4">销售统计：</td>
                        <td></td>
                        <td></td>
                        <td>${totalPrice!}</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td colspan="2">业务员：${order.userName!}</td>
                        <td colspan="2">仓储：${invoice.storage!}</td>
                        <td colspan="2">审核：${invoice.examine!}</td>
                        <td colspan="2">客户签名：</td>
                    </tr>
                </table>
            </div>
            <p class="desc">注：1收货方如发现数量、质量问题，请于货物到达贵公司五日内提出调货或者退货申请。2双方发生纠纷应协商解决，协商不成提请杭州震诚五金机电有限公司所在地人民法院解决。3销售方无责，需方调换货物，应支付相关费用。</p >
        </div>
    </div>
</div>
<!--endprint-->


<div style="text-align: center">
    <input type="button" class="button" value="打印" onclick="doPrint()" >
    <input type="hidden" id = "nextPage" value="${orderItems.currPage+1}">
    <input type="hidden" id="previousPage" value="${orderItems.currPage-1}">
    <input type="hidden" id="orderId" value="${orderId}">

    <#if orderItems.totalPage != 1>
        <#if orderItems.currPage != 1>
            <input type="button" class="buttonPage" value="上一页" onclick="previous()" >
        </#if>
        <#if orderItems.currPage != orderItems.totalPage>
            <input type="button" class="buttonPage" value="下一页" onclick="nextPages()" >
        </#if>
    </#if>
</div>



<script>


    function nextPages() {
        window.location.href = "/sys/orders/preview?orderId="+$("#orderId").val()+"&page="+$("#nextPage").val();
    }

    function previous() {
        window.location.href = "/sys/orders/preview?orderId="+$("#orderId").val()+"&page="+$("#previousPage").val();
    }
    function doPrint() {
        if (!!window.ActiveXObject || "ActiveXObject" in window) { //是否ie
            remove_ie_header_and_footer();
        }
        bdhtml=window.document.body.innerHTML;
        sprnstr="<!--startprint-->"; //开始打印标识字符串有17个字符
        eprnstr="<!--endprint-->"; //结束打印标识字符串
        prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容
        prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容
        window.document.body.innerHTML=prnhtml; //把需要打印的指定内容赋给body.innerHTML
        window.print(); //调用浏览器的打印功能打印指定区域
        window.document.body.innerHTML=bdhtml; // 最后还原页面
    }

    function remove_ie_header_and_footer() {
        var hkey_path;
        hkey_path = "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
        try {
            var RegWsh = new ActiveXObject("WScript.Shell");
            RegWsh.RegWrite(hkey_path + "header", "");
            RegWsh.RegWrite(hkey_path + "footer", "");
        } catch (e) {
        }
    }
</script>
</body>
</html>